<script setup lang="ts">
import { ref, nextTick } from "vue";
import type { Ref } from "vue";
import { YiTable, YiAction, YiModal } from "@uublue/yimi-element-plus";
import {
  formatMenuItemApiTree,
  type Resource,
} from "@/utils/resource-security";
import {
  ElTree,
  ElSelect,
  ElTabs,
  ElMessageBox,
  ElMessage,
} from "element-plus";
import { FolderOpened, MagicStick, Document } from "@element-plus/icons-vue";
import moment from "moment";
import UserForm from "./user-form.vue";
import SecurityDisplay from "../api/security-display.vue";
import UserSecurityAction from "./user-security-action.vue";
import type { DeptOption } from "../dept/types";

import { mapRecursively, findRecursively } from "@/utils/array-recursion";
import axiosInst from "@/utils/request";
import pinia from "@/stores/index";
import { usePage } from "@/stores/page";

const pageStore = usePage(pinia);
// 部门树选项
const deptOptions: Ref<DeptOption[]> = ref([]);
const chosenDeptKey = ref();
const deptNameInput: Ref<string | undefined> = ref();
const deptTree: Ref<typeof ElTree | undefined> = ref();
const userTable: Ref<typeof YiTable | undefined> = ref();

const rolePermissionTable: Ref<typeof YiAction | null> = ref(null);
const menuItemGroupOptions: Ref<Record<string, any>[]> = ref([]);
const menuItemGroup: Ref<string> = ref("local");
const roleCodeNameMap: Ref<Record<string, string>> = ref({});
const menuItemApiTreeMap: Record<string, Resource[]> = {};
const addPermissionParts: Ref<string[]> = ref([]);
const addPermissionOptions: Ref<string[][]> = ref([]);

// methods
function loadMenuItemApiTree(forceFetch: boolean = false): Promise<Resource[]> {
  if (forceFetch || !menuItemApiTreeMap[menuItemGroup.value]) {
    return new Promise<Resource[]>((resolve) => {
      axiosInst.request(getMenuApiTree(menuItemGroup.value)).then((res) => {
        menuItemApiTreeMap[menuItemGroup.value] = formatMenuItemApiTree(
          res.data.rows
        );
        resolve(menuItemApiTreeMap[menuItemGroup.value]);
      });
    });
  } else {
    return new Promise<Resource[]>((resolve) => {
      resolve(menuItemApiTreeMap[menuItemGroup.value]);
    });
  }
}

function loadMenuGroups() {
  axiosInst.request(getMenuGroups).then((res) => {
    // menuItemGroupOptions.value = new OptionsMaker('code', 'label').make(res.data)
    menuItemGroupOptions.value = mapRecursively(
      res.data as any[],
      (menuGroup) => {
        return {
          value: menuGroup.code,
          label: menuGroup.label,
          children: menuGroup.children,
        };
      }
    );
  });
}

function parseRolesPermissions(roles: Record<string, any>[]) {
  const permissionMap: Record<string, string[]> = {};
  const permissions = (roles || [])
    .reduce((_permissions: string[], role: any) => {
      const rolePermissions = (role.defaultPermissions || []).concat(
        role.permissions || []
      );
      rolePermissions.forEach((pCode: string) => {
        let permissionRoles = permissionMap[pCode];
        if (!permissionRoles) {
          permissionRoles = [];
          permissionMap[pCode] = permissionRoles;
        }
        if (!permissionRoles.includes(role.code)) {
          permissionRoles.push(role.code);
        }
      });
      return _permissions.concat(rolePermissions);
    }, [])
    .map((code) => {
      return {
        permission: code,
      };
    });
  return [permissions, permissionMap];
}

function loadUserSecurity(
  userId: number,
  realName: string
): Promise<Record<string, any>> {
  return new Promise<Record<string, any>>((resolve) => {
    axiosInst.request(listUserSecurity(userId)).then((res) => {
      const ownedRoles: string[] = res.data.roles
        .filter((rp: any) => rp.code != undefined)
        .map((rp: any) => {
          return rp.code;
        });

      const ownedPermissions: string[] = (res.data.permissions || [])
        .filter((rp: any) => rp.code != undefined)
        .map((rp: any) => {
          return rp.code;
        });

      const allPermissions = ownedPermissions.concat(
        (res.data.roles || []).reduce((_permissions: string[], role: any) => {
          return _permissions
            .concat(role.defaultPermissions || [])
            .concat(role.permissions || []);
        }, [])
      );

      resolve({
        id: userId,
        realName,
        ...res.data,
        ownedRoles,
        ownedPermissions,
        allPermissions,
      });
    });
  });
}

function filterDeptTree(deptName?: string) {
  deptTree.value?.filter(deptName);
}

function getDeptNameById(id: number) {
  return findRecursively(deptOptions.value, (deptOption) => {
    return id === deptOption.id;
  })?.name;
}

//on create
loadMenuGroups();

axiosInst.request(getDepartmentTree).then((response) => {
  const _deptOptions = mapRecursively(
    response?.data?.rows as any[],
    (deptOption) => {
      return {
        id: deptOption.id,
        name: deptOption.name,
        children: deptOption.children,
      };
    }
  );

  // 递归修改部门options，children为空数组时，去除children字段
  deptOptions.value = mapRecursively(_deptOptions, ({ id, name, children }) => {
    let option;
    if (Array.isArray(children) && children.length == 0) {
      option = { id, name };
    } else {
      option = { id, name, children };
    }
    return option;
  });
});

axiosInst.request(queryRoles).then((res) => {
  (res.data.rows as any[]).forEach((row) => {
    roleCodeNameMap.value[row.code] = row.name;
  });
});
</script>

<!-- 定义api -->
<script lang="ts">
import userApis from "@/apis/system/user";
import deptApis from "@/apis/system/dept";
import menuApis from "@/apis/system/menu";
import roleApis from "@/apis/system/role";
import permissionApis from "@/apis/system/permission";
import type { AxiosRequestConfig } from "axios";

const { getDepartmentTree } = deptApis;
const {
  queryUsers,
  addUser,
  updateUser,
  updateUserStatus,
  removeUser,
  listUserRole,
  listUserSecurity,
  setUserSecurity,
  associateUserRole,
  disassociateUserRole,
  associateUserPermission,
  disassociateUserPermission,
} = userApis;
const { getMenuApiTree, getMenuGroups } = menuApis;
const { queryRoles, listRoleSecurity } = roleApis;
const { getPermissionPart } = permissionApis;
export default {
  name: "UserView",
  apis: {
    queryUsers,
    addUser,
    updateUser,
    updateUserStatus,
    removeUser,
    listUserRole,
    listUserSecurity,
    setUserSecurity,
    queryRoles,
    listRoleSecurity,
    associateUserRole,
    disassociateUserRole,
    associateUserPermission,
    disassociateUserPermission,
    getMenuApiTree,
    getMenuGroups,
    getPermissionPart,
  },
};
</script>

<template>
  <!-- 用户管理 -->
  <div class="app-container" style="height: 100%">
    <el-row :gutter="20" style="height: 100%">
      <!--部门数据-->
      <el-col :span="5" :xs="0" style="height: calc(100% - 10px)">
        <el-input
          v-model="deptNameInput"
          placeholder="请输入部门名称"
          clearable
          size="default"
          prefix-icon="el-icon-search"
          style="margin-bottom: 20px"
          @change="
            () => {
              filterDeptTree(deptNameInput);
            }
          "
        />

        <el-scrollbar ref="scrollbar" class="dept-tree-scrollbar" always>
          <el-tree
            ref="deptTree"
            :data="deptOptions"
            :props="{
              children: 'children',
              label: 'name',
            }"
            :expand-on-click-node="false"
            :filter-node-method="
              (value, data) => {
                if (!value) return true;
                return data.name.indexOf(value) !== -1;
              }
            "
            node-key="id"
            default-expand-all
            highlight-current
            @node-click="
              ({ id }) => {
                let currentKey = deptTree?.getCurrentKey();
                let targetDeptId = undefined;
                if (currentKey == chosenDeptKey) {
                  deptTree?.setCurrentKey(null);
                  chosenDeptKey = undefined;
                } else {
                  targetDeptId = id;
                  chosenDeptKey = currentKey;
                }
                userTable?.refresh({
                  params: { deptId: targetDeptId },
                });
              }
            "
          />
        </el-scrollbar>
      </el-col>
      <el-col :span="19" :xs="24">
        <yi-table
          ref="userTable"
          :api="queryUsers"
          :mix-model="({ realName, contactNumber, createTime }, resolve) => {
            let params: Record<string, any> = { realName, contactNumber }
            if (Array.isArray(createTime)) {
              params.createTimeStart = createTime[0]
              params.createTimeEnd = createTime[1]
            }

            resolve({
              params
            })
          }
          "
          :columns="[
            {
              label: '登录名',
              prop: 'username',
              width: 100,
            },
            {
              label: '用户名称',
              prop: 'realName',
              width: 100,
            },
            {
              label: '部门',
              prop: 'deptId',
              formatter: (row, column, cellValue) => {
                return getDeptNameById(cellValue);
              },
            },
            {
              label: '联系方式',
              prop: 'contactNumber',
              width: 150,
            },
            {
              label: '账号状态',
              prop: 'status',
              align: 'center',
              slot: 'status',
              width: 100,
            },
            {
              label: '创建时间',
              prop: 'createTime',
              formatter: (row, column, cellValue) => {
                return moment(cellValue).format('lll');
              },
            },
            {
              label: '操作',
              prop: 'opt',
              slot: 'opt',
            },
          ]"
          :res-adapter="
            ({ data }) => {
              return data;
            }
          "
        >
          <template #conditions="{ model, refresh }">
            <el-form :model="model" size="small" inline>
              <el-form-item label="用户名称">
                <el-input
                  v-model="model.realName"
                  clearable
                  placeholder="输入用户名称"
                ></el-input>
              </el-form-item>
              <el-form-item label="联系方式">
                <el-input
                  v-model="model.contactNumber"
                  clearable
                  placeholder="输入联系方式"
                ></el-input>
              </el-form-item>

              <el-form-item label="创建时间">
                <el-date-picker
                  v-model="model.createTime"
                  style="width: 240px"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="refresh()">查询</el-button>
              </el-form-item>
            </el-form>
          </template>
          <template #actions="{ refresh }">
            <el-row>
              <yi-action
                :api="addUser"
                plain
                text="添加"
                type="primary"
                size="small"
                icon="el-icon-plus"
                modal-title="添加"
                model-reserve="never"
                dialog-width="750px"
                @on-submit-success="refresh"
              >
                <template #default="scope">
                  <user-form
                    v-model="scope.model"
                    :form-ref="scope.form"
                    use-for="add"
                    :dept-options="deptOptions"
                  />
                </template>
              </yi-action>
            </el-row>
          </template>

          <template #status="{ row, refresh }">
            <template v-if="row.userType === 1">
              <el-tag v-if="row.status === 0" type="info">禁用</el-tag>
              <el-tag v-else type="success">正常</el-tag>
            </template>
            <yi-action
              v-else
              v-model="row.status"
              :api="
                ({ value: status }) => {
                  return updateUserStatus(row.id, status);
                }
              "
              trigger="switch"
              :confirm-text="
                () => {
                  return row.status === 0 ? '禁用用户？' : '启用用户？';
                }
              "
              :active-value="1"
              active-color="#67C23A"
              :inactive-value="0"
              inactive-color="#909399"
              @on-submit-success="refresh"
            />
          </template>

          <template #opt="{ row, refresh }">
            <!-- 按钮：修改用户 -->
            <yi-action
              title="修改用户"
              :api="updateUser"
              type="primary"
              trigger="link"
              :underline="false"
              text="编辑"
              size="small"
              icon="el-icon-edit"
              :model="row"
              modal-title="修改用户"
              dialog-width="750px"
              :mix-model="
                (
                  {
                    id,
                    username,
                    realName,
                    deptId,
                    contactNumber,
                    email,
                    remark,
                  },
                  resolve
                ) => {
                  resolve({
                    data: {
                      id,
                      username,
                      realName,
                      deptId,
                      contactNumber,
                      email,
                      remark,
                    },
                  });
                }
              "
              @on-submit-success="
                (res, formModel) => {
                  Object.assign(row, formModel);
                }
              "
            >
              <template #default="scope">
                <user-form
                  v-model="scope.model"
                  :form-ref="scope.form"
                  :dept-options="deptOptions"
                  use-for="edit"
                />
              </template>
            </yi-action>

            <YiModal
              text="授权"
              icon="el-icon-key"
              type="primary"
              trigger="link"
              :on-open="
                ({ resolve, context }) => {
                  loadMenuItemApiTree().then((resourceData) => {
                    loadUserSecurity(row.id, row.realName).then((user) => {
                      resolve({
                        currentTab: context.currentTab || 'resource',
                        menuItemApiTree: resourceData,
                        user,
                      });
                    });
                  });
                }
              "
              :underline="false"
              dialog-width="70%"
              size="default"
              :modal-title="'【' + row.realName + '】'"
            >
              <template #default="{ context, setContext }">
                <el-tabs
                  v-model="context.currentTab"
                  type="border-card"
                  @tab-change="
                    (name) => {
                      if ('role' == name) {
                        const activeRoleTabTimes =
                          context.activeRoleTabTimes || 0;
                        setContext({
                          activeRoleTabTimes: activeRoleTabTimes + 1,
                        });
                      } else if ('permission' == name) {
                        const [rolePermissions, rolePermissionMap] =
                          parseRolesPermissions(context.user.roles);
                        setContext({
                          rolePermissions,
                          rolePermissionMap,
                        });
                      }
                    }
                  "
                >
                  <el-tab-pane label="资源" name="resource" lazy>
                    <yi-table
                      ref="rolePermissionTable"
                      class="menu-table"
                      :columns="[
                        {
                          label: '资源名',
                          prop: 'title',
                          showOverflowTooltip: true,
                          formatter: (row, column, cellValue) =>
                            row.title || row.name,
                        },
                        {
                          label: '类型',
                          prop: 'type',
                          slot: 'type',
                        },
                        {
                          label: '所需角色',
                          prop: 'roleRequirement',
                          slot: 'roles',
                        },
                        {
                          label: '所需权限',
                          prop: 'permissionRequirement',
                          showOverflowTooltip: true,
                          slot: 'permissions',
                        },
                        {
                          label: '是否拥有',
                          prop: 'matched',
                          slot: 'matched',
                        },
                      ]"
                      max-height="620px"
                      row-key="key"
                      :data="context.menuItemApiTree"
                      :paged="false"
                      empty-text="尚无资源，请先完成菜单和接口的同步操作！"
                      :tools="[]"
                      @redraw-complete="
                        (rows) => {
                          rows?.forEach((_row) => {
                            if (rolePermissionTable) {
                              rolePermissionTable?.toggleRowExpansion(
                                _row,
                                true
                              );
                            }
                          });
                        }
                      "
                    >
                      <template #actions>
                        <el-select
                          v-model="menuItemGroup"
                          placeholder="选择菜单组"
                          size="small"
                          style="width: 240px"
                          @change="
                            () => {
                              loadMenuItemApiTree().then((resourceData) => {
                                setContext({
                                  menuItemApiTree: resourceData,
                                });
                              });
                            }
                          "
                        >
                          <el-option
                            v-for="(item, index) in menuItemGroupOptions"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </template>
                      <template #tools>
                        <el-tooltip
                          class="item"
                          effect="dark"
                          content="刷新"
                          placement="top"
                        >
                          <el-button
                            circle
                            size="small"
                            icon="el-icon-refresh"
                            @click="
                              () => {
                                loadMenuItemApiTree(true).then(
                                  (resourceData) => {
                                    loadUserSecurity(row.id, row.realName).then(
                                      (user) => {
                                        setContext({
                                          menuItemApiTree: resourceData,
                                          user,
                                        });
                                      }
                                    );
                                  }
                                );
                              }
                            "
                          >
                          </el-button>
                        </el-tooltip>
                      </template>
                      <template #type="{ value, row: subRow }">
                        <el-link
                          v-if="value == 'Api'"
                          type="warning"
                          :underline="false"
                          :icon="MagicStick"
                          >操作</el-link
                        >
                        <el-link
                          v-else-if="value == 'Page'"
                          type="primary"
                          :underline="false"
                          :icon="Document"
                          @click="
                            () => {
                              rolePermissionTable?.toggleRowExpansion(subRow);
                            }
                          "
                          >页面</el-link
                        >
                        <el-link
                          v-else
                          :underline="false"
                          :icon="FolderOpened"
                          @click="
                            () => {
                              rolePermissionTable?.toggleRowExpansion(subRow);
                            }
                          "
                          >目录</el-link
                        >
                      </template>
                      <template #roles="{ value }">
                        <template v-if="value">
                          <security-display
                            :codes="value"
                            :owned-codes="context.user.ownedRoles"
                            :code-name-map="roleCodeNameMap"
                          />
                        </template>
                      </template>
                      <template #permissions="{ value }">
                        <template v-if="value">
                          <security-display
                            :codes="value"
                            :owned-codes="context.user.allPermissions"
                          />
                        </template>
                      </template>

                      <template #matched="{ row: subRow }">
                        <template v-if="subRow.type != 'Directory'">
                          <UserSecurityAction
                            :api="setUserSecurity"
                            :role-security-api="listRoleSecurity"
                            :current-user="context.user"
                            :current-resource="subRow"
                            @on-submit-success="
                              () => {
                                loadUserSecurity(row.id, row.realName).then(
                                  (user) => {
                                    nextTick(() => {
                                      setContext({
                                        user,
                                      });
                                    });
                                  }
                                );
                              }
                            "
                          />
                        </template>
                      </template>
                    </yi-table>
                  </el-tab-pane>
                  <el-tab-pane label="角色" name="role" lazy>
                    <yi-table
                      :refresh-trigger="context.activeRoleTabTimes"
                      :api="
                        () => {
                          return {
                            ...listUserRole(row.id),
                          };
                        }
                      "
                      :res-adapter="(res, model) => {
                          let rows = res.data.map((row: Record<string, any>) => {
                            return {
                              id: row.roleId,
                              name: row.roleName,
                              code: row.roleCode,
                              hasRole: row.userId != null
                            }
                          })
                          return { rows }
                        }
                        "
                      :columns="[
                        {
                          label: '角色名',
                          prop: 'name',
                        },
                        {
                          label: '角色编码',
                          prop: 'code',
                        },
                        {
                          label: '是否拥有',
                          prop: 'hasRole',
                          slot: 'hasRole',
                        },
                      ]"
                      :page-sizes="[10, 20]"
                    >
                      <template #hasRole="{ row: subRow, refresh: subRefresh }">
                        <yi-action
                          v-model="subRow.hasRole"
                          :api="
                            ({ value: toAssociate }) => {
                              if (toAssociate) {
                                return associateUserRole(row.id, subRow.id);
                              } else {
                                return disassociateUserRole(row.id, subRow.id);
                              }
                            }
                          "
                          trigger="switch"
                          @on-submit-success="
                            () => {
                              subRefresh();
                              loadUserSecurity(row.id, row.realName).then(
                                (user) => {
                                  nextTick(() => {
                                    setContext({
                                      user,
                                    });
                                  });
                                }
                              );
                            }
                          "
                        />
                      </template>
                    </yi-table>
                  </el-tab-pane>

                  <!-- 用户权限 -->
                  <el-tab-pane label="权限" name="permission" lazy>
                    <el-row :gutter="20">
                      <el-col :span="12" :xs="0">
                        <YiTable
                          :columns="[
                            {
                              label: '直接权限',
                              prop: 'permission',
                            },
                            {
                              label: '操作',
                              prop: 'opt',
                              width: 150,
                              slot: 'opt',
                            },
                          ]"
                          :data="context.user.ownedPermissions.map((code: string) => {
                            return {
                              permission: code
                            }
                          })
                            "
                          :tools="[]"
                        >
                          <template #actions>
                            <YiAction
                              :api="associateUserPermission"
                              icon="el-icon-plus"
                              text="添加"
                              type="primary"
                              size="small"
                              :plain="true"
                              :modal-title="
                                '为【' + row.realName + '】添加权限'
                              "
                              model-reserve="never"
                              :on-open="({ resolve }) => {
                                  if (!addPermissionOptions[0]) {
                                    axiosInst
                                      .request(getPermissionPart() as AxiosRequestConfig)
                                      .then((res) => {
                                        const permissionCodes = res.data
                                        addPermissionOptions[0] = ['*'].concat(permissionCodes)
                                        resolve()
                                      })
                                  } else {
                                    resolve()
                                  }
                                }
                                "
                              :on-submit="
                                (scope, request, close) => {
                                  if (
                                    addPermissionParts.length <
                                    addPermissionOptions.length
                                  ) {
                                    ElMessage({
                                      message: '权限片段不能为空',
                                      type: 'error',
                                      duration: 3 * 1000,
                                    });
                                    return;
                                  }
                                  request({
                                    params: {
                                      userId: row.id,
                                      permissionCode:
                                        addPermissionParts.join(':'),
                                    },
                                  }).then((res) => {
                                    close(true);
                                    loadUserSecurity(row.id, row.realName).then(
                                      (user) => {
                                        nextTick(() => {
                                          setContext({
                                            user,
                                          });
                                        });
                                      }
                                    );
                                  });
                                }
                              "
                            >
                              <template #default>
                                <el-form>
                                  <el-select
                                    v-for="(
                                      permissionCodes, index
                                    ) in addPermissionOptions"
                                    :key="index"
                                    v-model="addPermissionParts[index]"
                                    filterable
                                    size="small"
                                    placeholder="权限片段"
                                    style="width: 200px"
                                    clearable
                                    @change="(selectPart) => {
                                        const _length = addPermissionParts.length
                                        const __length = addPermissionOptions.length
                                        for (var i = index + 1; i < _length; i++) {
                                          addPermissionParts.pop()
                                        }
                                        for (var i = index + 1; i < __length; i++) {
                                          addPermissionOptions.pop()
                                        }

                                        if (selectPart) {
                                          const ahead = addPermissionParts.join(':')
                                          axiosInst
                                            .request(getPermissionPart(ahead) as AxiosRequestConfig)
                                            .then((res) => {
                                              const permissionCodes = res.data
                                              if (
                                                Array.isArray(permissionCodes) &&
                                                permissionCodes.length > 0
                                              ) {
                                                addPermissionOptions[index + 1] = ['*'].concat(
                                                  permissionCodes
                                                )
                                              }
                                            })
                                        }
                                      }
                                      "
                                  >
                                    <el-option
                                      v-for="(code, _index) in permissionCodes"
                                      :key="_index"
                                      :label="code"
                                      :value="code"
                                    />
                                  </el-select>
                                </el-form>
                              </template>
                            </YiAction>
                          </template>

                          <template #opt="{ row: subPermissionRow }">
                            <yi-action
                              v-model:loading="pageStore.loading"
                              title="删除"
                              :api="
                                disassociateUserPermission(
                                  row.id,
                                  subPermissionRow.permission
                                )
                              "
                              type="primary"
                              trigger="link"
                              :underline="false"
                              text="删除"
                              size="default"
                              icon="el-icon-delete"
                              :confirm="
                                (resolve, reject) => {
                                  ElMessageBox.confirm(
                                    '是否删除该用户的权限【' +
                                      subPermissionRow.permission +
                                      '】？',
                                    '提示',
                                    {
                                      confirmButtonText: '确定',
                                      cancelButtonText: '取消',
                                      type: 'warning',
                                      appendTo: 'body',
                                    }
                                  )
                                    .then(() => {
                                      resolve();
                                    })
                                    .catch(() => {
                                      reject();
                                    });
                                }
                              "
                              @on-submit-success="
                                () => {
                                  loadUserSecurity(row.id, row.realName).then(
                                    (user) => {
                                      setContext({
                                        user,
                                      });
                                    }
                                  );
                                }
                              "
                            />
                          </template>
                        </YiTable>
                      </el-col>
                      <el-col :span="12" :xs="0">
                        <YiTable
                          :columns="[
                            {
                              label: '间接权限',
                              prop: 'permission',
                            },
                            {
                              label: '来自角色',
                              prop: 'from',
                              slot: 'from',
                            },
                          ]"
                          :data="context.rolePermissions"
                          :tools="[]"
                        >
                          <template #from="{ row: subRow }">
                            <el-tag
                              v-for="(role, index) in context.rolePermissionMap[
                                subRow.permission
                              ]"
                              :key="index"
                              type="info"
                              >{{ role }}</el-tag
                            >
                          </template>
                          <template
                            #pagination="{
                              currentPage,
                              pageSize,
                              total,
                              onSizeChange,
                              onCurrentChange,
                            }"
                          >
                            <el-pagination
                              background
                              :current-page="currentPage"
                              :page-size="pageSize"
                              layout="total, sizes, prev, pager, next"
                              :pager-count="5"
                              :total="total"
                              @size-change="onSizeChange"
                              @current-change="onCurrentChange"
                            />
                          </template>
                        </YiTable>
                      </el-col>
                    </el-row>
                  </el-tab-pane>
                </el-tabs>
              </template>
            </YiModal>

            <!-- 按钮：删除用户 -->
            <yi-action
              title="删除用户"
              :api="removeUser(row.id)"
              type="primary"
              trigger="link"
              :underline="false"
              text="删除"
              size="default"
              icon="el-icon-delete"
              modal-title="删除用户"
              confirm-text="是否删除该用户？"
              @on-submit-success="refresh"
            />
          </template>
        </yi-table>
      </el-col>
    </el-row>
  </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
/* element plus的tree组件，highlight-current = true时，非当前节点取消focus的背景颜色 */
.el-tree.el-tree--highlight-current {
  .el-tree-node:not(.is-current):focus {
    > .el-tree-node__content {
      background-color: inherit !important;
    }
  }
}

.dept-tree-scrollbar {
  height: calc(100% - 50px);
}

.menu-table .el-table__expand-icon {
  width: 20px !important;
}
</style>
